.numberPad{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  .show{
    display:flex;
    background: #f5f5f5;
    padding: 6px 12px;
    font-size: 24px;
    line-height: 24px;
    font-family: Consolas, monospace;
    .show-string{
      font-size:16px;
    }
    .show-number{
      text-align: right;
      flex:1
    };
    height:16%
  }
  .buttonWrap{
    height:100%;
    button{
      width: 25%;
      height: 25%;
      float: left;
      background: transparent;
      border: none;
      font-size: 20px;
      &:focus{
        outline: none
      };
      $bg: #f2f2f2;
      &.OK{
        height:75%;
        float:right
      }
      &:nth-child(1) {
          background: $bg;
      }

      &:nth-child(2), &:nth-child(5) {
          background: darken($bg, 4%);
      }

      &:nth-child(3), &:nth-child(6), &:nth-child(9) {
          background: darken($bg, 4*2%);
      }

      &:nth-child(4), &:nth-child(7), &:nth-child(10), &:nth-child(12) {
          background: darken($bg, 4*3%);
      }

      &:nth-child(13), &:nth-child(11) {
          background: darken($bg, 4*4%);
      }
      &:nth-child(14) {
          background: darken($bg, 4*5%);
      }
      &:nth-child(8) {
          background: darken($bg, 4*6%);
      }
    }
    
  }
}